<template>
  <div class="return-money-wrap flx-column">
    <el-button class="position-btn" type="primary" @click="openCreateDrawer('新增')">新增回款</el-button>

    <div class="flx money-total">
      <div class="item">
        <div class="label">总合同金额(元)</div>
        <div class="text-primary">103600.00</div>
      </div>
      <div class="item">
        <div class="label">总回款金额(元)</div>
        <div class="text-primary">100000.00</div>
      </div>
      <div class="item">
        <div class="label">未回款金额(元)</div>
        <div class="text-warning">3600.00</div>
      </div>
    </div>

    <div class="flx-1">
      <ProTable ref="proTable" :columns="columns" :toolButton="false" :searchParam="state.formParams" :requestApi="getList">
        <!-- 选择回款日期 -->
        <template #paymentDateHeader="scope">
          <span class="inline-block">
            <span class="flx-align-center">
              <span>{{ scope.column.label }}</span>
              <span class="flx-align-center ml-10">
                <el-icon @click.stop="handleClickPaymentDate"><Calendar /></el-icon>
                <el-date-picker
                  v-model="times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  ref="timePick"
                  class="time-pick"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="timeChange"
                >
                </el-date-picker>
              </span>
            </span>
          </span>
        </template>

        <!-- 选择提交时间-->
        <template #commitTimeHeader="scope">
          <span class="inline-block">
            <span class="flx-align-center">
              <span>{{ scope.column.label }}</span>
              <span class="flx-align-center ml-10">
                <el-icon @click.stop="handleClickCommitTime"><Calendar /></el-icon>
                <el-date-picker
                  v-model="commitTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  ref="commitTimePick"
                  class="time-pick"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="commitTimeChange"
                >
                </el-date-picker>
              </span>
            </span>
          </span>
        </template>

        <!-- 选择核实时间-->
        <template #verificationTimeHeader="scope">
          <span class="inline-block">
            <span class="flx-align-center">
              <span>{{ scope.column.label }}</span>
              <span class="flx-align-center ml-10">
                <el-icon @click.stop="handleClickVerificationTime"><Calendar /></el-icon>
                <el-date-picker
                  v-model="verificationTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  ref="verificationTimePick"
                  class="time-pick"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="verificationTimeChange"
                >
                </el-date-picker>
              </span>
            </span>
          </span>
        </template>

        <!-- 核实状态 -->
        <template #verifyStatus>
          <el-tag type="primary">核实中</el-tag>
          <!-- <el-tag type="success">已核实</el-tag>
            <el-tag type="danger">已拒绝</el-tag> -->
        </template>

        <!-- 操作 -->
        <template #operation="{ row }">
          <el-button link type="primary" @click="openDetailDrawer(row)">详情</el-button>
          <el-button link type="primary" @click="openInvoicingDrawer(row)">申请开票</el-button>
        </template>
      </ProTable>
    </div>
  </div>

  <!-- 申请开票 -->
  <apply-invoicing v-if="showInvoicing" ref="applyInvoicingRef" @close="showInvoicing = false"></apply-invoicing>

  <!-- 新增回款 -->
  <add-return-money v-if="showAddReturnMoney" ref="addReturnMoneyRef" @close="showAddReturnMoney = false"></add-return-money>

  <!-- 回款详情 -->
  <detail-return-money v-if="showDetailReturnMoney" ref="detailReturnMoneyRef" @resubmit="resubmit"></detail-return-money>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ApplyInvoicing from "../Invoice/components/ApplyInvoicing.vue";
import AddReturnMoney from "./components/Add.vue";
import DetailReturnMoney from "./components/Detail.vue";

// 获取申请人类型
const getTypeList = () => {
  return [
    { text: "A", value: "A" },
    { text: "B", value: "B" },
    { text: "C", value: "C" },
    { text: "D", value: "D" },
    { text: "E", value: "E" },
    { text: "F", value: "F" },
    { text: "G", value: "G" }
  ];
};

// 表格配置项
const columns = reactive([
  {
    prop: "contractName",
    columnKey: "contractName",
    label: "合同名称",
    width: 101,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "paymentName",
    columnKey: "type",
    label: "款项名称",
    minWidth: 120,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "returnAmount",
    label: "回款金额(元)",
    minWidth: 126,
    sortable: "custom"
  },
  {
    prop: "paymentDate",
    label: "回款日期",
    minWidth: 129,
    sortable: "custom"
  },
  {
    prop: "paymentVoucher",
    label: "回款凭证",
    minWidth: 86
  },
  {
    prop: "collectionAccount",
    label: "收款账户",
    minWidth: 106,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "commitTime",
    label: "提交时间",
    minWidth: 144,
    sortable: "custom"
  },
  {
    prop: "verifyStatus",
    label: "核实状态",
    minWidth: 98,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "financialVouchers",
    label: "财务凭证",
    minWidth: 86
  },
  {
    prop: "verificationTime",
    label: "核实时间",
    minWidth: 144,
    sortable: "custom"
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 90,
    fixed: "right"
  }
]);

const state = reactive({
  formParams: {}
});

const getList = () => {
  return new Promise((resolve, reject) => {
    return resolve({
      data: {
        list: [{}]
      }
    });
  });
};

// 选择回款日期
const times = ref([]);
const timePick = ref();
const handleClickPaymentDate = () => {
  timePick.value.focus();
};
const timeChange = () => {
  console.log(times.value);
};

// 选择提交时间
const commitTimePick = ref();
const commitTime = ref([]);
const handleClickCommitTime = () => {
  commitTimePick.value.focus();
};
const commitTimeChange = () => {
  console.log(commitTime.value);
};

// 选择核实时间
const verificationTimePick = ref();
const verificationTime = ref([]);
const handleClickVerificationTime = () => {
  verificationTimePick.value.focus();
};
const verificationTimeChange = () => {
  console.log(verificationTime.value);
};

// 申请开票
const applyInvoicingRef = ref();
const showInvoicing = ref(false);
const openInvoicingDrawer = row => {
  showInvoicing.value = true;
  nextTick(() => {
    applyInvoicingRef.value.acceptParams({
      title: "申请开票",
      id: row.id
    });
  });
};

// 新增回款
const showAddReturnMoney = ref(false);
const addReturnMoneyRef = ref();
const openCreateDrawer = () => {
  showAddReturnMoney.value = true;
  nextTick(() => {
    addReturnMoneyRef.value.acceptParams({
      title: "提交回款",
      id: 1
    });
  });
};

// 回款详情
const showDetailReturnMoney = ref(false);
const detailReturnMoneyRef = ref();
const openDetailDrawer = row => {
  showDetailReturnMoney.value = true;
  nextTick(() => {
    detailReturnMoneyRef.value.acceptParams({
      title: "回款详情",
      id: 1
    });
  });
};

// 重新提交
const resubmit = () => {
  showDetailReturnMoney.value = false;
  openCreateDrawer();
};
</script>

<style lang="scss" scoped>
.money-total {
  padding-bottom: 8px;
  .item {
    margin-right: 32px;
    line-height: 22px;
    .label {
      color: #909399;
    }
  }
}
.position-btn {
  position: absolute;
  right: 0;
  top: 0px;
}
</style>
